import {
  Layout,
  Accordion,
  UserSubPageBase,
  Header,
  Paragraph,
} from "@/components";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useEffect, useState } from "react";
import style from "./index.module.scss";

type TermsApiResponseShape = {
  termsConditions: {
    title: string;
    details: string;
  }[];
};

export default function TermsConditionsPage() {
  const [tcData, setTCData] = useState<TermsApiResponseShape | null>(null);

  useEffect(() => {
    Taro.request({
      url: `${process.env.apiEndpoint}/about/termsConditions`,
      success(result) {
        setTCData(result.data.data as TermsApiResponseShape);
      },
    });
  }, []);

  return (
    <Layout>
      {tcData && (
        <UserSubPageBase
          title="条款细则"
          scrollable
        >
          <View className={style.list}>
            {tcData.termsConditions.map((tcItem, tcItemIdx) => (
              <Accordion
                key={tcItemIdx}
                title={tcItem.title}
                content={tcItem.details.split(/\n/).map((chunk) => ({
                  type: "text",
                  text: chunk,
                }))}
              />
            ))}
          </View>
        </UserSubPageBase>
      )}
    </Layout>
  );
}
